<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-breadcrumb  separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col>
        <el-table
          v-loading="loading"
          :data="rightList"
          border
          style="width: 100%">
          <el-table-column
            label="id"
            width="180"
            prop="id"
            >
          </el-table-column>
          <el-table-column
            label="权限名称"
            width="180"
            prop="authName"
            >
          </el-table-column>
          <el-table-column
            label="路径"
            prop="path"
            >
          </el-table-column>
          <el-table-column label="层级">
            <template slot-scope="scope">
              <span>{{scope.row.level | fmtLevel}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading:true,
      rightList:[]
    };
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      this.$http.get('rights/list').then(res=>{
        console.log(res);
        if(res.data.meta.status == 200){
          this.rightList = res.data.data
          this.loading = false 
        }
      })
    }
  },
  filters:{
    fmtLevel(level){
      const obj = {
        0:'一级',
        1:'二级',
        2:'三级'
      }
      return obj[level]
    }
  }
}
</script>
<style lang="scss" scoped>
</style>